<template>
  <div class="myBetRecord hideScrollBar">
    <ClientOnly>
      <!-- 导航 -->
      <NavBar
        :title="t('lotteryMoney.mfcjcsjl')"
        isFixed
        :isShadow="false"
        @getNavBarHeight="(h) => (pageData.navBarHeight = h)"
      />
      <!-- 工具栏 -->
      <div class="tool items-center">
        <!-- 三个快捷菜单 -->
        <div class="items-center tool-menu">
          <div
            class="tool-menu-btn"
            :class="{ 'tool-menu-activity': pageData.menuType == 1 }"
            @click.stop="menuTypeChange(1)"
          >
            {{ t("common.wsy") }}
          </div>
          <div
            class="tool-menu-btn"
            :class="{ 'tool-menu-activity': pageData.menuType == 3 }"
            @click.stop="menuTypeChange(3)"
          >
            {{ t("common.ysy") }}
          </div>
          <div
            class="tool-menu-btn"
            :class="{ 'tool-menu-activity': pageData.menuType == 2 }"
            @click.stop="menuTypeChange(2)"
          >
            {{ t("common.ygq") }}
          </div>
        </div>
      </div>
      <!-- 内容部分 -->
      <div
        class="contentview hideScrollBar"
        :style="{
          height: `calc(100vh - ${pageData.navBarHeight}px - 44px)`,
        }"
        :class="{
          'contentview-notdata-bg':
            !pageData.loading && pageData.list.length === 0,
        }"
      >
        <!-- 暂无内容 -->
        <div
          v-if="!pageData.loading && pageData.list.length === 0"
          class="contentview-notdata items-center"
        >
          <img class="contentview-notdata-img" src="/image/notdate-icon.png" />
          <div class="contentview-notdata-desc">{{ t("mvp.other.zwnr") }}</div>
        </div>
        <!-- 列表 -->
        <van-list
          v-else
          style="background-color: #fff"
          v-model:loading="pageData.loading"
          :finished="pageData.finished"
          :finished-text="t('mvp.other.text4')"
          :loading-text="t('mvp.other.text11')"
          @load="onLoadList"
        >
          <!-- 列表 -->
          <div
            class="contentview-item items-center"
            :class="{
              'contentview-item-ygq': pageData.menuType == 2,
            }"
            v-for="(item, index) in pageData.list"
            :key="item.id"
          >
            <!-- 左侧 -->
            <div class="contentview-item-left items-center">
              <img
                v-if="pageData.menuType == 1"
                class="contentview-item-left-bg"
                src="/image/lotterymoney/free-card-bg1.svg"
              />
              <img
                v-else-if="pageData.menuType == 2"
                class="contentview-item-left-bg"
                src="/image/lotterymoney/free-card-bg2.svg"
              />
              <img
                v-else
                class="contentview-item-left-bg"
                src="/image/lotterymoney/free-card-bg3.svg"
              />
              <div class="contentview-item-left-title">
                {{ $t("lotteryMoney.mfxzk") }}
              </div>
              <div
                class="contentview-item-left-tag"
                :class="{
                  'contentview-item-left-tag-ygq': pageData.menuType == 2,
                }"
              >
                {{
                  $t(
                    pageData.menuType == 1
                      ? "common.wsy"
                      : pageData.menuType == 2
                      ? "common.ygq"
                      : "common.ysy"
                  )
                }}
              </div>
            </div>
            <!-- 信息 -->
            <div class="contentview-item-right items-center">
              <!-- 类型标题 -->
              <div class="contentview-item-right-title">
                {{ taskStatus(item.prizeType) }}
                <!-- {{ item.id }} -->
              </div>

              <!-- 获得时间 -->
              <div class="contentview-item-right-time">
                {{ $t("lotteryMoney.hdsj") }} {{ item.sendTimeStr }}
              </div>
              <!-- 使用时间 -->
              <div
                v-if="pageData.menuType == 3"
                class="contentview-item-right-time"
              >
                {{ $t("lotteryMoney.usesj") }} {{ item.useTimeStr }}
              </div>

              <!-- 过期时间 -->
              <div
                v-if="pageData.menuType == 1 || pageData.menuType == 2"
                class="contentview-item-right-time"
              >
                {{ $t("lotteryMoney.sxsj") }} {{ item.recycleTimeStr }}
              </div>
            </div>
          </div>
        </van-list>
      </div>
    </ClientOnly>
  </div>
</template>
<script setup name="myBetRecord">
import { useGlobalStore } from "@/store/global";
import { getFreeDrawPrizeRecord } from "@/api/inviteFriends";
import { useDateFormat } from "@vueuse/core";

const { t } = useI18n();

const globalStore = useGlobalStore();
// 如果没有登录-直接跳转登录页面
if (!globalStore.$state.token && process.client) {
  bridge.onAppLogin();
}

const route = useRoute();
console.log("页面参数:", route.query);
// 资源
const file = getOssFileUrl({
  avatarDefault: "/image/avatar-default.png",
});

// firebase埋点
const firebase = useInitFirebase(); // 初始化firebase

// 页面属性
const pageData = reactive({
  navBarHeight: 0,
  // 上拉加载属性
  loading: false,
  finished: false,
  prefixs: [], // 分类标识
  list: [],
  pageNum: 0,
  pageSize: 20,
  // 筛选项
  startTime: 0,
  endTime: 0,
  menuType: 1, // 1： 未使用 2： 已过期 3: 已使用
});

/**
 * @description: 上啦加载
 * @param {*} isRetry 重试一次
 * @author: zhj1214
 */
const onLoadList = (isRetry) => {
  pageData.pageNum += 1;
  getMyBettingRecordRequest((isAdd) => {
    if (!isAdd) {
      pageData.pageNum -= 1;
      if (!isRetry) {
        setTimeout(() => {
          onLoadList(true);
        }, 3000);
      }
    }
  });
};

// 获取列表数据
const getMyBettingRecordRequest = async (call) => {
  pageData.loading = true;

  const res = await getFreeDrawPrizeRecord({
    queryType: pageData.menuType,
    pageNum: pageData.pageNum,
    pageSize: pageData.pageSize,
    sourceType: route.query.sourceType ? Number(route.query.sourceType) : 1,
  });
  pageData.loading = false;

  // console.log("--获取列表数据--", res);
  if (res) {
    if (!res.records) res.records = [];
    // 1. 加工数据
    let majorList = [];
    res.records.forEach((e, index) => {
      // 未使用: 获得时间
      if (e.sendTime) {
        const sendTime = useDateFormat(
          Number(e.sendTime),
          "YYYY-MM-DD HH:mm:ss"
        ).value;
        e.sendTimeStr = sendTime;
      } else {
        e.sendTimeStr = "--";
      }
      // 已使用: 使用时间
      if (pageData.menuType == 3) {
        e.useTimeStr = "--";
      }

      // 已过期: 过期时间
      if (e.recycleTime) {
        const recycleTime = useDateFormat(
          Number(e.recycleTime),
          "YYYY-MM-DD HH:mm:ss"
        ).value;
        e.recycleTimeStr = recycleTime;
      } else {
        e.recycleTimeStr = "--";
      }

      // 根据 countShow 数量进行复制多份,展示
      if (Number(e.countShow) == 1) {
        majorList.push(e);
        // 已使用: 使用时间
        if (e.useTimeList && e.useTimeList.length > 0) {
          e.useTimeStr = useDateFormat(
            Number(e.useTimeList[0]),
            "YYYY-MM-DD HH:mm:ss"
          ).value;
        } else {
          e.useTimeStr = "--";
        }
      } else if (Number(e.countShow) > 1) {
        let i = 0;
        while (i < Number(e.countShow)) {
          // 已使用: 使用时间
          if (e.useTimeList && e.useTimeList.length > 0) {
            e.useTimeStr = useDateFormat(
              Number(e.useTimeList[i]),
              "YYYY-MM-DD HH:mm:ss"
            ).value;
          } else {
            e.useTimeStr = "--";
          }
          //
          const copy = JSON.parse(JSON.stringify(e));
          copy.id = `${e.id}-${i}`;

          majorList.push(copy);
          i += 1;
        }
      }
    });
    // 2. 合并数据
    pageData.list = pageData.list.concat(majorList);
    // 3. 分页结束
    if (majorList.length == 0 && pageData.pageNum >= 1) {
      pageData.finished = true;
    } else if (majorList.length < pageData.pageSize && pageData.pageNum >= 1) {
      pageData.finished = true;
    }
    // 4. 回调
    if (majorList && majorList.length > 0) {
      call && call(true);
    } else {
      call && call(false);
    }
  } else {
    pageData.finished = true;
    call && call(false);
  }
};

onMounted(() => {
  // 1. 埋点访问
  firebase?.logEvent("BDC_H5_freeLottery_Reocrd_PUV");
  // 3. 请求数据
  onLoadList();
});
// 全部、收入、支出
const menuTypeChange = (val) => {
  // 1. 是否重置数据
  if (val !== pageData.menuType) {
    pageData.list = [];
    pageData.finished = false;
  } else {
    return;
  }
  // 2. 赋值、请求新数据
  pageData.pageNum = 1;
  pageData.menuType = val;
  getMyBettingRecordRequest();
};

// 任务状态
const taskStatus = (type) => {
  // 1:新人奖励 2:每日领取奖励(新版超级抽奖) 3:免费次数邀友-好友注册(新版超级抽奖) 4:免费次数邀友-好友首次入金(新版超级抽奖) 为空默认是1
  // 1:新人奖励 2:抽奖邀友-注册 3:抽奖邀友-首充5美金
  if (type == 1) {
    return t("inviteFriends.xrfl");
  } else if (type == 2) {
    return t("lotteryMoney.mrcjfl");
  } else if (type == 3) {
    return t("lotteryMoney.cjyyzc");
  } else if (type == 4) {
    return t("lotteryMoney.cjyycz");
  } else {
    return {
      title: "--",
      desc: "--",
    };
  }
};
</script>
<style lang="scss" scoped>
.myBetRecord {
  min-height: 100vh;
  background-color: #f0f3fa;

  .tool {
    width: 100vw;
    height: 42 * 2px;
    background-color: #fff;
    margin-bottom: 10 * 2px;
    &-menu {
      border-left: 1 * 2px solid #f5f5f5;
      font-weight: 510;
      padding: 0 15 * 2px;
      &-btn {
        text-wrap: nowrap;
        white-space: nowrap;
        font-size: 13 * 2px;
        color: #999da7;
        padding: 6px 8 * 2px;
        margin-right: 10 * 2px;
      }
      &-activity {
        color: #007bff !important;
        background-color: #ecf5ff !important;
        border-radius: 4 * 2px;
      }
    }
  }
  .contentview {
    padding-bottom: var(--safe-area-inset-bottom);
    background-color: #fff;
    overflow-y: scroll;
    position: relative;
    &-header {
      padding: 16 * 2px 16 * 2px 0 16 * 2px;
      // margin-top: 10 * 2px;
      position: relative;
      top: 20px;
      height: 78 * 2px;
      z-index: 8;
      &-text {
        margin-top: 10 * 2px;
        color: #141924;
        font-size: 15 * 2px;
        font-weight: 590;
        letter-spacing: -0.8px;
      }
      &-left {
        position: relative;
        &-text {
          color: #141924;
          font-size: 13 * 2px;
          font-weight: 590;
          letter-spacing: -0.8px;
        }
        &-img {
          width: 16 * 2px;
          height: 16 * 2px;
          margin-right: 5 * 2px;
        }
      }
      &-img {
        border-top-right-radius: 12 * 2px;
        border-top-left-radius: 12 * 2px;
        position: absolute;
        top: 0;
        left: 0;
        // height: 107 * 2px;
      }
    }
    &-notdata {
      justify-content: center;
      flex-direction: column;
      position: relative;
      top: 120 * 2px;
      &-img {
        width: 200 * 2px;
        height: 200 * 2px;
      }
      &-desc {
        margin-top: -35 * 2px;
        color: #999da7;
        font-size: 13 * 2px;
      }
      &-bg {
        background-color: #fff !important;
      }
    }
    &-item {
      margin: 15 * 2px;
      border-radius: 8 * 2px;
      overflow: hidden;
      background-color: #ecf5ff;
      &-ygq {
        background-color: #f0f3fa;
      }

      &-left {
        width: 121 * 2px;
        height: 90 * 2px;
        position: relative;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;

        &-bg {
          position: absolute;
          z-index: 8;
          top: 0;
          left: 0;
          width: 121 * 2px;
          height: 90 * 2px;
          object-fit: cover;
        }
        &-title {
          position: relative;
          width: calc(100% - 12 * 2px);
          text-align: center;
          z-index: 9;
          color: #fff;
          font-size: 14 * 2px;
          font-weight: 590;
          margin-bottom: 4 * 2px;
        }
        &-tag {
          position: relative;
          z-index: 9;
          align-self: center;
          margin-right: 11 * 2px;
          color: #007bff;
          font-size: 11 * 2px;
          white-space: nowrap;
          font-weight: 400;

          padding: 4 * 2px;
          border-radius: 4 * 2px;
          background: rgba(255, 255, 255, 0.6);

          &-ygq {
            color: #7c9ebe;
          }
        }
      }

      &-right {
        flex: 1;
        width: 100%;
        height: 82 * 2px;
        position: relative;
        right: 4 * 2px;
        margin: 4 * 2px 0;
        border: 0.7 * 2px solid #def;
        border-left: none;
        border-radius: 6 * 2px;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;

        &-title {
          color: #3b4d5f;
          font-size: 11 * 2px;
          font-weight: 400;
          margin-bottom: 6 * 2px;
        }
        &-time {
          color: #abb3bd;
          font-size: 11 * 2px;
          white-space: nowrap;
          font-weight: 400;
          margin-bottom: 6 * 2px;
        }
      }
    }
  }
}
</style>
